import React from 'react';
import ReactDOM from 'react-dom';
import APP from './App.js'
//默认导出可以随意命名
// import render from './render'
//命名导出引入要加{}
import {render} from './render'
           




// console.log(str)
//引入路径.js可以不写
//index.js是项目入口文件
//文件引入形式都是import（导入）,export（导出）
const ele = 
<h1 id="title" className='tit'>
    <li>list</li>
    <div>123</div>
    <div>456</div>
</h1>
console.log(ele)

// const e={
//     type:'h1',
//     props:{children:'hello',id:'title',className:'tit'}
// }

// //自封装render函数实现jsx渲染到页面
// const render =(element,container)=>{
//     const{type,props}=element;
//     //创建元素
//     const ele = document.createElement(type);
//     //遍历属性
//     // console.log(Object.keys(props))
//     Object.keys(props).forEach(attr=>{
//         if(attr == 'children'){
//             const child = props['children'];

//             if(typeof child == 'string'){
//                 ele.innerText = child;
//             }else if(child instanceof Array){
//                 child.forEach(elem =>{
//                     if(typeof elem == 'string'){
//                         // ele.innerHTML += elem;
//                         const textNode = document.createTextNode(elem);
//                         ele.appendChild(textNode);
//                     }else{
//                         render(elem,ele)
                        
//                     }
//                 })
//             }else{
//                 render(child,ele)
//             }
//         }else{
//             ele[attr] = props[attr]
//             //ele.setAattribute(attr,props[attr])
//         }
//     })

    // //容器中添加元素
    // container.appendChild(ele)
// }
render(ele,document.getElementById('root'))

// ReactDOM.render(
//     ele,
//     document.getElementById('root')//渲染对象
// );


//加引号是普通字符，不加是jsx表达式
// console.log(<div>hello</div>)
// console.log("<div>hello</div>")

// const ele = <div className="box"></div>
// console.log(ele)
//用对象的形式描写一个节点
//给开发者一个语法糖的形式，只要编写HTML代码，babel工具编译成

// ReactDOM.render(
//     ele,
//   document.getElementById('root')//渲染对象
// );

// ReactDOM.render( 
//     <h1> hello r </h1>,
//     document.getElementById('root')
// );



//函数调用（）

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();